<!--  -->
<template>
  <div>
    <div class="home">
      <commonHeader></commonHeader>
      <div class="search-section search">
        <div class="search-form">
          <el-input
            placeholder="请输入内容"
            v-model="keyword"
            class="input-with-select"
          >
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="书名" value="书名"></el-option>
              <el-option label="作者" value="作者"></el-option>
              <el-option label="出版社" value="出版社"></el-option>
              <el-option label="出版日期" value="出版日期"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
      </div>
      <div class="tebie-tuijian-section container-wrap">
        <div class="section-header">
          <span class="section-title">热门推荐</span>
        </div>
        <div class="tebie-tuijian">
          <hdp
            :imgList="hostlistbook"
            :shownumber="5"
            :width="100"
            :height="250"
            :imgWidth="300"
          >
          </hdp>
        </div>
      </div>
      <div class="latest-section container-wrap">
        <div class="section-header">
          <span class="section-title">临床医学</span>
          <span class="section-more fright"> 
            <router-link class="more-link" :to="{path:'booklist',query:{code:'00010003',grade:3}}">查看更多</router-link>
            </span>
        </div>
        <div class="latest">
          <el-tabs
            type="border-card"
            v-model="clinicalmedicactive"
            @tab-click="handleClick"
          >
            <el-tab-pane
              v-for="item in datalist"
              :key="item.code"
              :label="item.name"
              :name="item.code"
            >
            </el-tab-pane>
            <el-row :gutter="17">
              <el-col
                :span="4"
                v-for="(item, index) in clinicalmedicbooklist"
                :key="item.filename"
              >
                <div class="book">
                  <div class="book-cover">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="getimg(item)"
                      :preview-src-list="getsrcpre(item)" 
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="book-title">
                    <router-link :title="item.书名" :to="{path:'/booklistdetails',query:{id:item.id}}">{{ item.书名 }}</router-link>
                  
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-tabs>
        </div>
      </div>
      <div class="container-wrap"><hr class="red-break-line" /></div>

      <div class="container-wrap">
        <div class="section-header">
          <span class="section-title">中国医学</span>
          <span class="section-more fright">
             <router-link class="more-link" :to="{path:'booklist',query:{code:'00010004',grade:3}}">查看更多</router-link>
          </span
          >
        </div>
        <div class="latest">
          <el-tabs
            type="border-card"
            v-model="chinamedicactive"
            @tab-click="handleClick1"
          >
            <el-tab-pane
              v-for="item in chinamediclist"
              :key="item.code"
              :label="item.name"
              :name="item.code"
            ></el-tab-pane>
            <el-row :gutter="17">
              <el-col
                :span="4"
                v-for="item in chinamedicbooklist"
                :key="item.code"
              >
                <div class="book">
                  <div class="book-cover">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="getimg(item)"
                      :preview-src-list="getsrcpre(item)"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="book-title">
                     <router-link :title="item.书名" :to="{path:'/booklistdetails',query:{id:item.id}}">{{ item.书名 }}</router-link>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-tabs>
        </div>
      </div>
      <div class="container-wrap"><hr class="red-break-line" /></div>
      <div class="container-wrap">
        <div class="section-header">
          <span class="section-title">基础医学</span>
          <span class="section-more fright">
           <router-link class="more-link" :to="{path:'booklist',query:{code:'00010002',grade:3}}">查看更多</router-link>
            </span
          >
        </div>
        <div class="latest">
          <el-tabs
            type="border-card"
            v-model="medicalseriesactive"
            @tab-click="handleClick3"
          >
            <!-- <el-tab-pane
              v-for="item in basicmedicinecls"
              :key="item"
              :label="item"
              :name="item"
            ></el-tab-pane> -->
             <el-tab-pane
              v-for="item in basicmedicinecls"
               :key="item.code"
              :label="item.name"
              :name="item.code"
            ></el-tab-pane> 
            <el-row :gutter="17">
              <el-col
                :span="4"
                v-for="item in basicmedicinebooks"
                :key="item.code"
              >
                <div class="book">
                  <div class="book-cover">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="getimg(item)"
                      :preview-src-list="getsrcpre(item)"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="book-title">
                      <router-link :title="item.书名" :to="{path:'/booklistdetails',query:{id:item.id}}">{{ item.书名 }}</router-link>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-tabs>
        </div>
      </div>
    </div>
    <commonFooter />
  </div>
</template>

<script>
import commonHeader from "../common/header.vue";
import commonFooter from "../common/footer.vue";
import hdp from "../common/swiper.vue";
import { getbookclsnochild, getList, gethotList } from "@/api/book";
import {getimg,getsrcpre} from "@/utils/common"
export default {
  name: "",
  components: { commonHeader, hdp, commonFooter },
  props: [],
  data() {
    return {
      hostlistbook: [], //热门推荐
      clinicalmedic: [], //临床医学
      clinicalmedicbooklist: [], //临床医学书籍
      datalist: [],
      chinamediclist: [], //中国医学
      chinamedicbooklist: [], //中国医学书籍
      basicmedicinecls:[],//基础医学分类
      basicmedicinebooks:[],//基础医学书籍
      basicmedicinecls:[],//基础医学分类
      medicalseriescls: [
         "现代著名老中医名著重刊丛书",
          "中国现代百名中医临床家丛书",
        "中国古医籍整理丛书",
        "皇汉医学丛书",
        "中医古籍珍稀抄本精选",
        "临床医师诊疗全书",
        "近代名老中医经验集",
        "明清名医全书大成",
        "中华医书集成",
      ], //医学丛书分类
      medicalseriesactive: "现代著名老中医名著重刊丛书", //选中丛书
      medicalseriesbooks: [], //医学丛书
      select: "书名",
      keyword:"",
      page: 1,
      pagesize: 12,
      clinicalmedicactive: "second",
      chinamedicactive: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  async mounted() {
    var { data } = await gethotList({
      page: this.page,
      limit: this.pagesize,
    });
    this.hostlistbook = data.data.list;
    console.log("热门推荐", this.hostlistbook);
    this.datalist = await this.getbookclsnochild("00010003", 3);
    this.clinicalmedicactive = this.datalist[0].code;

    this.chinamediclist = await this.getbookclsnochild("00010004", 3);
    this.chinamedicactive = this.chinamediclist[0].code;
    var { data } = await this.getDataList(this.clinicalmedicactive);
    this.clinicalmedicbooklist = data.list;
    var { data } = await this.getDataList(this.chinamedicactive);
    this.chinamedicbooklist = data.list;
    // var { data } = await getList({
    //   丛书名: this.medicalseriesactive,
    //   page: this.page,
    //   limit: this.pagesize,
    // });
    // this.medicalseriesbooks = data.data.list;
    //基础医学
   this.basicmedicinecls=await this.getbookclsnochild("00010002", 3);
   this.medicalseriesactive=this.basicmedicinecls[0].code;
   var {data} = await this.getDataList(this.medicalseriesactive);
   console.log("基础医学",data)
   this.basicmedicinebooks=data.list;
    
   

  },
  methods: {

     search(){
           this.$router.push({ path:'/booklist',query:{type:this.select,keyw:this.keyword}  })
        },
    //获取图片
    getimg(item){
     return getimg(item)
    },
    getsrcpre(item){
     return  getsrcpre(item)
    },

    //临床医学切换
    async handleClick() {
      console.log("clinicalmedicactive", this.clinicalmedicactive);
      var { data } = await this.getDataList(this.clinicalmedicactive);
      this.clinicalmedicbooklist = data.list;
    },

    //中国医药切换
    async handleClick1() {
      console.log("clinicalmedicactive", this.clinicalmedicactive);
      var { data } = await this.getDataList(this.chinamedicactive);
      this.chinamedicbooklist = data.list;
    },

        //基础医药切换
    async handleClick3() {
      //console.log("基础医学", this.medicalseriesactive);
      var { data } = await this.getDataList(this.medicalseriesactive);
      this.basicmedicinebooks=data.list;
    },


    //丛书切换
    async handleClick2() {
      var { data } = await getList({
        丛书名: this.medicalseriesactive,
        page: this.page,
        limit: this.pagesize,
      });
      this.medicalseriesbooks = data.data.list;
      console.log("丛书", data.data.list);
    },
    async getbookclsnochild(code, grade) {
      var { data } = await getbookclsnochild({ code: code, grade: grade });
      return data;
    },
    async getDataList(syscheckcodes) {
      var { data } = await getList({
        syscodes: syscheckcodes,
        page: this.page,
        limit: this.pagesize,
      });

      return data;
    },
  },
};
</script>
<style lang='css' scoped>
.home {
  margin-bottom: 60px;
}
.search {
  background-color: #5e554b;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../../assets/img/homeimg/bg1.jpg");
  height: 395px;
  padding-top: 151px;
}
.search-form {
  width: 860px;
  margin: auto;
}
/deep/.search .el-input .el-input__inner {
  height: 50px;
  line-height: 50px;
}
/deep/.el-select .el-input {
  width: 100px;
  text-align: center;
}
/deep/ .search .el-input-group__append {
  background: #1296db;
  border: none;
}
/deep/.search .el-input-group__append .el-button--default {
  border: none;
  /* background: #85101a; */
  color: #fff;
  width: 126px;
  font-size: 24px;
  border-radius: 0;
}
/deep/.el-input-group__prepend {
  border-radius: 0;
}
.container-wrap {
  width: 1200px;
  margin: auto;
}

.tebie-tuijian-section {
  margin-top: 40px;
}
.section-header {
  color: #85101a;
  border-bottom: 1px solid #85101a;
}
.section-header .section-title {
  font-size: 28px;
  font-family: SimSun, Songti SC;
  font-weight: 500;
  color: #85101a;
  height: 64px;
  line-height: 64px;
}
.tebie-tuijian-section .tebie-tuijian {
  margin-top: 24px;
  background: #ededed;
  padding: 24px 0;
  padding-top: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 270px;
}

.latest-section {
  margin-top: 60px;
}
.section-header .section-more {
  margin-top: 16px;
}
.section-header .section-more .more-link {
  display: inline-block;
  padding: 0 16px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #85101a;
  line-height: 32px;
  height: 32px;
  border-radius: 20px;
  border: 1px solid #85101a;
}
.fright {
  float: right;
}
.latest {
  margin-top: 24px;
}

.latest .book .book-cover {
  height: 228px;
  padding: 16px 20px;
  background: #ededed;
  cursor: pointer;
}
/deep/.latest .book .book-cover .el-image{
  overflow:inherit !important;
}
/deep/.latest .book .book-cover .el-image img:hover{
   
    transform: translate3d(0,-2px,0);
    -webkit-box-shadow: 0 5px 30px rgba(0,0,0,.2);
    box-shadow: 0 5px 30px rgba(0,0,0,.2);

}

.latest .book .book-title {
  padding: 0 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 16px;
  font-family: NotoSansHans-Medium, NotoSansHans;
  font-weight: 500;
  color: #204171;
  line-height: 24px;
  margin-top: 12px;
  cursor: pointer;
}
/deep/.el-tabs__item.is-active {
  color: #85101a;
}
/deep/.el-tabs__active-bar {
  background-color: #85101a;
}

.red-break-line {
  border-color: #ccc;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}

</style>